<template>
	<view class="container">
		<view class="top_img">
			<image class="bg" :src="$fun.imgUrl('webimage/register_bg.png')" mode=""></image>
			<view class="logo">
				<image src="/static/login_logo.png" mode=""></image>
				<view>
					{{$t('login.name9')}}
				</view>
			</view>
		</view>
		<view class="register_box">
			<view class="register_item">
				<input type="text" placeholder-class="inputPlaceholder" :placeholder="$t('user.name37')" v-model="mobile">
			</view>
			<view class="register_item">
				<input type="password" placeholder-class="inputPlaceholder" :placeholder="$t('user.name46')" v-model="pwd">
			</view>
			<!-- <view class="register_item"
				style="display: flex;justify-content: space-between;padding: 0 30rpx;align-items: center;padding-right: 20rpx;">
				<input type="text" placeholder-class="inputPlaceholder" placeholder="请输入验证码" v-model="code" />
				<view class="">
					<u-code ref="uCode" @change="codeChange" seconds="120" changeText="x秒重新获取"></u-code>
					<u-button type="text" :text="tips" style="width: 100%;font-size: 50px;" @tap="getCode"></u-button>
				</view>
			</view> -->
			<button class="register_button" @click="toLogin" :disabled="logining">
				{{$t('login.name9')}}
			</button>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';

	export default {
		data() {
			return {
				truename: '',
				key: '',
				value: '',
				logining: false,
				selectList: [],
				timer: null,
				event: 'register',
				config: 0,
				configObj: {},
				disabled: false,
				code: '',
				pwd: '',
				tips: '获取验证码',
				mobile: '',
			}
		},
		onLoad(Option) {
			if (Option.invitation) {
				this.invitation = Option.invitation
				this.disabled = true
			}
		},
		onShow() {
			this.$fun.ajax.post('config/gettitle', {}).then(res => {
				this.selectList = res.data
			})
			uni.setNavigationBarTitle({
				title: this.$t('login.name9')
			})
		},
		methods: {
			...mapMutations(['login']),
			changeValue(e) {
				this.key = this.selectList[e.detail.value]
			},
			codeChange(text) {
				this.tips = text;
			},
			async getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					const res = await this.$fun.ajax.post('sms/send', {
						mobile: this.mobile,
						event: 'resetpwd'
					})
					uni.hideLoading();
					if (res.code == 1) {
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast(res.msg);
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}

				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			gotoApp() {
				location.href = this.configObj.download_address
			},

			inputChange(e) {
				const key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;
			},
			navBack() {
				uni.navigateBack();
			},
			toRegist() {
				this.$fun.jump('./login', 3, 0)
			},
			async toLogin() {
				let {
					mobile,
					code,
					pwd
				} = this;
				let parms = {
					mobile,
					code,
					pwd
				}
				if (mobile == '') {
					this.$fun.msg(this.$t('user.name37'))
					return
				}
				if (pwd == '') {
					this.$fun.msg(this.$t('user.name46'))
					return
				}
				// if (code == '') {
				// 	this.$fun.msg('请输入验证码')
				// 	return
				// } // user/editPay
				await this.$fun.ajax.post('user/editPwd', {
					...parms
				}).then(res => {
					if (res.code == 1) {
						this.$fun.msg(res.msg)
						uni.clearStorage()
						setTimeout(() => {
							uni.reLaunch({
								url: '/pageA/public/login'
							})
						}, 800)
					}
				})
			}
		},
		destroyed() {
			clearInterval(this.timer)
			this.timer = null
		}

	}
</script>

<style lang='scss'>
	.container {
		position: relative;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		background: #fff;

		.top_img {
			width: 100%;
			height: 410upx;

			.bg {
				width: 100%;
				height: 410upx;
			}

			.logo {
				text-align: center;
				position: absolute;
				top: 100upx;
				left: 0;
				right: 0;
				margin: auto;

				image {
					width: 140upx;
					height: 140upx;
				}

				view {
					font-size: 36upx;
					font-family: Microsoft YaHei;
					font-weight: bold;
					color: #F6F6F6;
					margin-top: 20upx;
				}
			}
		}

		.register_box {
			margin: 20upx 75upx;

			.register_item {
				::v-deep .u-button__text {
					font-size: 34rpx !important;
				}

				position: relative;
				margin-top: 30upx;
				width: 100%;
				height: 80upx;
				background: #F6F6F6;
				border: 2upx solid #BFBFBF;
				border-radius: 40upx;
				padding: 20upx 40upx;
				box-sizing: border-box;

				input {
					font-size: 24upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #000000;
				}

				.inputPlaceholder {
					font-size: 24upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #CCCCCC;
				}

				.code {
					position: absolute;
					top: 25upx;
					right: 40upx;
					font-size: 24upx;
				}
			}

			.register_button {
				margin-top: 100upx;
				width: 100%;
				height: 80upx;
				background: linear-gradient(90deg, #5990FF 0%, #00bbff 100%);
				border-radius: 40px;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #FFFFFF;
			}
		}

		.register-section {
			position: absolute;
			left: 0;
			bottom: 50upx;
			width: 100%;
			font-size: $font-sm+2upx;
			color: $font-color-base;
			text-align: center;

			text {
				color: #FE555A;
				margin-left: 10upx;
			}
		}
	}
</style>